<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">

    <title>练习设置</title>
    <link rel="stylesheet" href="assets/index.css" />
    <script src="assets/vue.js"></script>
    <script src="assets/vant.min.js"></script>
    <script src="assets/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <van-nav-bar title="练习设置" />
        </div>
        <van-sticky :offset-bottom="0" position="bottom">
            <van-space direction="vertical" fill style="margin-top: 20px;">

            </van-space>

            <div style="text-align: center; color: gray; ">每次出题数</div>
            <div style="display: flex; flex-direction: row; justify-content: center; margin-top: 10px;">
                <van-button plain :type="{danger: selected_number == 10, success: selected_number != 10}" class="button"
                    @click="click_on_number(10)">10</van-button>
                <van-button plain :type="{danger: selected_number == 20, success: selected_number != 20}" class="button"
                    @click="click_on_number(20)">20</van-button>
                <van-button plain :type="{danger: selected_number == 30, success: selected_number != 30}" class="button"
                    @click="click_on_number(30)">30</van-button>
                <van-button plain :type="{danger: selected_number == 40, success: selected_number != 40}" class="button"
                    @click="click_on_number(40)">40</van-button>
                <van-button plain :type="{danger: selected_number == 50, success: selected_number != 50}" class="button"
                    @click="click_on_number(50)">50</van-button>
            </div>


            <van-row justify="center" style="margin-top: 20px;">
                <van-button @click="update_settings" type="success" block>确定</van-button>
                <van-button url="/time_line.html" type="" block style="margin-top: 20px;">查看答题记录</van-button>
            </van-row>
            <div style="text-align: center; color: lightgray; font-size: small;margin-top: 10px;">version:1.2407.1</div>
        </van-sticky>
    </div>
    <script>
        const { createApp, ref, reactive, computed, onMounted } = Vue
        // 在 #app 标签下渲染一个按钮组件
        const app = Vue.createApp({
            setup() {

                const selected_number = ref(10)

                const click_on_number = (n) => {
                    selected_number.value = n
                    console.log("choose number: ", { n })
                }

                const try_update_settings = () => {
                    const result = {
                        minute: 1, second: 12, err_count: 1,
                    }
                    add_record(result)
                }
                const update_settings = () => {
                    const settings = {
                        exercise_count: selected_number.value,
                    }
                    console.log('提交设置', { settings })
                    // 定义URL
                    const url = '/update_settings'

                    axios.post(url, settings)
                        .then(response => {
                            console.log(response.data); // 处理响应数据
                            // vant.showNotify({ type: 'success', message: '添加成功' });
                            vant.showSuccessToast('更新成功');
                        })
                        .catch(error => {
                            console.error(error); // 处理错误
                            vant.showFailToast('更新失败');
                            // vant.showNotify({ type: 'danger', message: '添加失败' });
                        });
                }
                const get_settings = () => {
                    const url = '/settings'

                    axios.get(url)
                        .then(response => {
                            const res = response.data
                            selected_number.value = res.data.exercise_count
                            // vant.showSuccessToast('添加成功');
                        })
                        .catch(error => {
                            console.error(error); // 处理错误
                            vant.showFailToast('获取数据失败');
                        });
                }
                onMounted(()=>{
                    get_settings()
                })
                return {
                    try_update_settings,
                    get_settings, update_settings,
                    selected_number,
                    click_on_number,
                }
            }
        });
        app.use(vant);

        // 通过 CDN 引入时不会自动注册 Lazyload 组件
        // 可以通过下面的方式手动注册
        app.use(vant.Lazyload);

        // 调用工具函数，弹出一个 Toast
        // vant.showToast('提示');
        vant.setToastDefaultOptions({ duration: 1000 });
        app.mount('#app');

    </script>
    <style>
        .button {
            min-width: 60px;
            margin-left: 10;
            margin-right: 10;
        }

        .unselected_button {}

        .selected_button {}
    </style>
</body>

</html>